<template>
	<view class="container">
		<u-navbar :title-bold='true' title='我的晴空万里券' :border-bottom='false'></u-navbar>
		<view class="btu btn">
			<button open-type="share"> 立即分享</button>
		</view>
		<p class="dsc">转发让好友注册登录，获得晴空万里券￥10</p>
		<!-- 		<view class="topEvent" v-if="docker">
			<button open-type="share">
				<view class="left">
					<image src="../../../static/icon/share.png" mode="widthFix"></image>
					<view>
						让好友点评
						<p>分享好友抵扣￥10</p>
					</view>
				</view>
			</button>

			<view class="right" @click="HandlerEvent" :style="{background:isLike?'#FFB761':''}">
				<image :src="isLike?'../../../static/icon/like.png':'../../../static/icon/unlike.png'" mode="widthFix">
				</image>
				<view>
					点赞
					<p>共获得{{likeNum}}次</p>
				</view>
			</view>
		</view> -->

		<view class="selction" v-if="list.length">
			<view class="title">
				<span>可用</span>
				<span>1次只能用1张券，不能叠加使用</span>
			</view>
			<view @click="HandlerClick(item)" v-if="!item.order_id" class="item usable" v-for="(item,index) in list"
				:key="index">
				<view>
					<view> ￥ <span>{{item.money}}</span><text>晴空万里券</text></view>
					<view>有效期: {{item.createtime}}至{{item.endtime}}</view>
				</view>
				<view class="use">去使用</view>
			</view>
		</view>

		<view class="selction" v-if="list2.length>0">
			<view class="title">不可用</view>
			<view v-if="item.order_id" class="nousable item" v-for="(item,index) in list2" :key="index">
				<view class="">
					<view> ￥ <span>{{item.money}}</span><text>晴空万里券</text></view>
					<view>有效期: {{item.createtime}}至{{item.endtime}}</view>
				</view>
				<view class="use">已过期</view>
			</view>
		</view>

		<view class="nulldata" v-if="list.length==0">
			<p class="dsc">无任何赠送券</p>
		</view>



	</view>
</template>

<script>
	import {
		getCoupon,
		getLike,
		like,
		addCoupon
	} from '@/api/index.js'
	export default {
		data() {
			return {
				list: [],
				list2: [],
				docker: '',
				isLike: 0,
				likeNum: 0,

			}
		},
		onLoad(e) {
			if (e.id) this.docker = e.id
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				let that = this
				getCoupon().then(res => {
					res.data.list.forEach(item => {
						if (!item.order_id) {
							this.list.push(item)
						} else {
							this.list2.push(item)
						}
					})
				})
				if (that.docker) {
					getLike({
						doctor_id: that.docker
					}).then(res => {
						if (res.code == 1) {
							that.likeNum = res.data.likeNum
							that.isLike = res.data.isLike
						}
					})
				}

			},
			share() {
				addCoupon().then(res => {
					console.log(res, '获得优惠券');
				})
			},
			HandlerClick(e) {
				let pages = getCurrentPages()
				let page = pages[pages.length - 2]
				page.$vm.coupon = e
				uni.navigateBack()
			},
			HandlerEvent() {
				let that = this
				like({
					doctor_id: that.docker
				}).then(res => {
					if (res.code == 1) {
						getLike({
							doctor_id: that.docker
						}).then(res => {
							if (res.code == 1) {
								that.likeNum = res.data.likeNum
								that.isLike = res.data.isLike
							}
						})
					}
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	.dsc {
		text-align: center;
		margin-top: 10rpx;
		color: #999999;
		font-size: 12px;
	}

	.btu {
		margin-top: 40px;
		background-color: #6EC9E1;
		height: 50px;

		button {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: unset;
			border: unset;
			color: #FFF;
			padding-left: 50rpx;
			line-height: unset;

			view {
				font-size: 14px;
				text-align: left;
			}
		}

	}

	.topEvent {
		margin-bottom: 15px;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		button {
			background-color: unset;
			border: 1px solid transparent;
			padding: 0;
		}

		.left,
		.right {
			color: #FFF;
			width: 50%;
			min-width: 160px;
			height: 70px;
			border-radius: 7px;
			display: flex;
			line-height: normal;
			align-items: center;
			justify-content: center;

			image {
				margin-right: 20rpx;
				width: 24px;
			}

			p {
				font-size: 12px;
			}
		}

		.right {
			background: #FDA43B;
			margin-left: 15px;
		}

		.left {
			background: #6EC9E1;
		}
	}


	.container {
		min-height: 100vh;
		background-color: #EEE;
		height: auto;

		.selction {
			margin-top: 20rpx;
			padding: 20rpx;

			.title {
				display: flex;
				justify-content: space-between;
				opacity: 0.8;
			}

			.item {
				background-color: #fff;
				width: inherit;
				height: 108px;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				padding-left: 50rpx;
				padding-right: 35rpx;
				align-items: center;
				font-size: 12px;
				line-height: 25px;
				color: #FFF;

				span {
					font-size: 30px;
					margin-right: 10rpx;
					font-weight: 550;
				}

				.use {
					width: 65.87px;
					height: 30px;
					border-radius: 128px;
					background: #FFFFFF;
					color: #6EC9E1;
					text-align: center;
					line-height: 30px;
				}
			}

			.usable {
				background: url('@/static/img/mine/useble.png');
				background-size: 100% auto;
				background-repeat: no-repeat;
			}

			.nousable {
				background: url('@/static/img/mine/unuseble.png');
				background-size: 100% auto;
				background-repeat: no-repeat;

				.use {
					color: #A8A8A8;
				}
			}
		}

		.nulldata {
			text-align: center;
			opacity: 0.6;
			font-size: 14px;
			margin-top: 25vh;
		}
	}
</style>